<template>
	<view class="wallet">
		<view class="card">
			<view class="text">
				<view class="num">{{balance || '0.00'}}</view>
				<text>广告余额(元)</text>
			</view>
			<view class="btn flex_center">
				<view class="btn_item"
					@click="$util.toUrl(`/pages/store/generalization/wallet/withdrawal?balance=${balance}`)">退款</view>
				<view class="btn_item" @click="$util.toUrl('/pages/store/generalization/wallet/recharge')">充值</view>
			</view>
		</view>

		<view class="tab flex_r_evenly">
			<view class="item flex_r_evenly" @click="onTab(1)" :id="tab == 1 ? 'select' : ''">
				<view>活动</view>
				<uni-icons type="down" :size="12"></uni-icons>
			</view>
			<view class="item flex_r_evenly" @click="onTab(2)" :id="tab == 2 ? 'select' : ''">
				<view>充值/退款</view>
				<uni-icons type="down" :size="12"></uni-icons>
			</view>
			<view class="item flex_r_evenly" @click="onTab(3)" :id="tab == 3 ? 'select' : ''">
				<view>消费记录</view>
				<uni-icons type="down" :size="12"></uni-icons>
			</view>
			<view class="item flex_r_evenly" @click="onTab(4)" :id="tab == 4 ? 'select' : ''">
				<view>广告费说明</view>
				<uni-icons type="down" :size="12"></uni-icons>
			</view>
		</view>

		<view class="container1" v-show="tab == 1">
			<rich-text :nodes="config"></rich-text>
		</view>

		<view class="container2" v-show="tab == 2">
			<empty v-if="!payList.length"></empty>
			<view class="box" v-for="(item,index) in payList" :key="index">
				<view class="list flex_r_between">
					<view class="left">
						<view class="text">
							<rich-text :nodes="item.message"></rich-text>
						</view>
						<view class="view">
							<uni-dateformat :date="item.create_time" format="yyyy/MM/dd hh:mm"></uni-dateformat>
						</view>
					</view>

					<view class="right" v-if="item.type == 2">
						<text>{{item.type == 1 ? '+' : '-'}}{{item.change_price}}</text>
						<view v-show="item.check_status == 1 || item.check_status == 3">{{
							item.check_status == 1 ?
							'审核中'
							: '审核拒绝'
						}}</view>
					</view>
				</view>
				<view class="remark" v-if="item.type == 2 && item.check_status == 3">
					原因：{{item.check_content || '暂无说明'}}
				</view>
			</view>
		</view>

		<view class="container3" v-show="tab == 3">
			<empty v-if="!list.length"></empty>
			<view class="list" v-for="(item,index) in list" :key="index"
				@click="$util.toUrl(`/pages/store/generalization/wallet/commission?data=${JSON.stringify(item)}`)">
				<view class="product flex_center">
					<view class="image">
						<!-- D:type == 1 或者 type == 6 数据格式一样 -->
						<image v-if="item.content.length"
							:src="item.type == 1 || item.type == 6 ? item.content[0].image : item.content.image" mode="aspectFill">
						</image>
					</view>
					<view class="text">
						<view class="name flex_center">
							<text class="hidden">{{item.type == 1 || item.type == 6 ? `${item.content.length}个作品` : item.content.name}}</text>

							<view>{{item.type == 1 ? '作品推广'
									: item.type == 6 ? '消息推广'
									: item.type == 5 ? '达人推广'
									: ''}}</view>
						</view>
						<view class="grid">
							<view class="item mt6 flex_r_between">
								<text>消费金额</text>
								<view class="red">-{{item.price}}</view>
							</view>
							<view class="item mt6 flex_r_between">
								<text>消费时间</text>
								<view style="font-weight: normal;">
									<uni-dateformat :date="item.create_time" format="yyyy-MM-dd hh:mm"></uni-dateformat>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="container1" v-show="tab == 4">
			<rich-text :nodes="config"></rich-text>
		</view>

	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty,
		},
		data() {
			return {
				tab: 1,

				key: 'activity',

				config: [],

				payList: [],
				payPage: 1,
				payTotal: 0,

				list: [],
				page: 1,
				total: 0,

				// 余额
				balance: '0.00',

			}
		},
		methods: {
			onTab(e) {
				this.tab = e;
				if (this.tab == 1) {
					this.key = 'activity';
					this.getConfig();
				}

				if (this.tab == 2) {
					this.payList = [];
					this.payPage = 1;
					this.getPayList();
				}

				if (this.tab == 3) {
					this.list = [];
					this.page = 1;
					this.getList();
				}

				if (this.tab == 4) {
					this.key = 'pm_introduce';
					this.getConfig();
				}
			},


			// /index/config?type=popularize&key=[activity:活动,pm_introduce:广告费说明]
			getConfig() {
				this.$get('/index/config', {
					type: 'popularize',
					key: this.key
				}).then(res => {
					this.config = res.data[this.key] || '';
				})
			},

			getPayList() {
				this.$get('/popularize/getBalanceLog', {
					order_type: '1,6',
					type: '1,2',
					page: this.payPage,
				}).then(res => {
					this.payTotal = res.data.total;
					this.payList.push(...res.data.data);
				})
			},

			getList() {
				this.$get('/popularize/getPopularizeList', {
					page: this.page,
					type: '1,6',
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			getMore() {
				if (this.tab == 2) {
					if (this.payTotal > this.payList.length) {
						this.payPage++;
						this.getPayList();
					}
				}

				if (this.tab == 3) {
					if (this.total > this.list.length) {
						this.page++;
						this.getList();
					}
				}
			},

			getBalance() {
				this.$post('/popularize/getBalance').then(res => {
					this.balance = res.data.balance;
				});
			},

			getRefresh() {
				this.getBalance();
				if (this.tab == 2) {
					this.payList = [];
					this.payPage = 1;
					this.getPayList();
				}

				if (this.tab == 3) {
					this.list = [];
					this.page = 1;
					this.getList();
				}
			},

		},

		created() {
			this.getConfig();

			// 获取曝光量余额
			this.getBalance();
		}
	}
</script>

<style lang="less" scoped>
	.wallet {
		padding: 24rpx;
	}

	.card {
		height: 240rpx;
		background: url('https://qiniu-cdn.maeiyun.com//h5static/store/expert_wallet_bg.png') 0 0 no-repeat;
		background-size: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		padding: 36rpx 40rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.text {
			.num {
				font-weight: 600;
				font-size: 56rpx;
				color: #FFFFFF;
			}

			text {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.btn {
			flex-direction: row-reverse;

			.btn_item {
				width: 128rpx;
				height: 48rpx;
				margin-left: 16rpx;
				background: linear-gradient(143deg, #FFF4C3 0%, #CE8D5B 100%);
				border-radius: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
			}
		}
	}

	.tab {
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 0 10rpx;
		margin: 24rpx 0 12rpx;

		.item {
			view {
				font-size: 26rpx;
				color: #666666;
				margin-right: 8rpx;
			}

			text {
				opacity: 0;
			}
		}

		#select {
			view {
				font-weight: 500;
				font-size: 26rpx;
				color: #131313;
			}

			text {
				opacity: 1;
			}
		}
	}

	.container1 {
		padding: 36rpx 30rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 44rpx;
	}

	.container2 {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 0 32rpx;

		.box {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F1F1F1;

			.list {
				.left {
					.text {
						font-size: 32rpx;
						color: #333333;
					}

					.view {
						text {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					text {
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
					}

					view {
						text-align: center;
						font-size: 24rpx;
						color: #FD2A53;
						background: #FFEAEE;
						border-radius: 16rpx;
						padding: 0 12rpx;
					}
				}
			}

			.remark {
				font-size: 24rpx;
				color: #FD2A53;
				margin-top: 12rpx;
			}
		}
	}

	.container3 {
		padding-top: 4rpx;

		.list {
			margin-top: 12rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			overflow: hidden;
			padding: 16rpx;

			.product {
				margin-bottom: 16rpx;

				.image {
					width: 176rpx;
					height: 176rpx;
					background: #D8D8D8;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 18rpx;

					image {
						width: 176rpx;
						height: 176rpx;
					}
				}

				.text {
					flex: 1;
					overflow: hidden;

					.name {
						margin-bottom: 30rpx;
						text {
							flex: 1;
							font-size: 32rpx;
							color: #333333;
							margin-right: 12rpx;
						}
						view {
							font-size: 28rpx;
							color: #333333;
							font-weight: 600;
						}
					}

					.grid {
						.item {
							text {
								font-size: 26rpx;
								color: #999999;
								line-height: 32rpx;
							}

							view {
								font-weight: 500;
								font-size: 26rpx;
								color: #333333;
							}

							.red {
								font-weight: 600;
								font-size: 28rpx;
								color: #FD2A53;
							}
						}

						.mt6 {
							margin-top: 6rpx;
						}
					}
				}
			}
		}
	}
</style>